<template>
    <div>
        <!-- 第一层，控制元素块在文档中的位置 -->
        <div class="layer">
            <!-- 第二层，控制内部元素的排列方式，也是主要类名加载标签 -->
            <div class="tier" ref="tier">
                <div class="title" @click.stop="ben">{{ z_title }}</div>
                <!-- 第三层，次显示，要切换的是它的挂载位置 -->
                <!-- 原本是挂载在tier内部，接收tier管控的 -->
                <div class="balcony" ref="balcony">
                    <!-- 上半部分 -->
                    <div class="boxs">
                        <div class="left">组件一</div>
                    </div>
                    <div class="boxs">组件二</div>
                    <div class="boxs">
                        <div class="right">组件三</div>
                    </div>

                    <!-- 下半部分 -->
                    <div
                        ref="item"
                        v-for="(item, index) in tiBox"
                        :key="index"
                        @click.stop="knib"
                        class="button-boxs"
                    >
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ["z_title"],
    data() {
        return {
            tiBox: ["元素一", "元素二", "元素三"],
            tabHurdles: {
                tabHurdle: 60, // 大屏顶部栏高度,单位是 px
                viewport: 750, // 视口分界点
                flag: false, // 下拉是否开启
            },
        };
    },
    mounted() {
        // 页面进入后给windows注册事件
        window.addEventListener("resize", () => {
            this.$nextTick(() => {
                // 视口宽度
                // 视口大于,说明切换到大屏，给出原始宽度
                if (window.innerWidth > this.tabHurdles.viewport) {
                    this.$refs.balcony.style.height =
                        this.tabHurdles.tabHurdle / 75 + "rem"; // 赋值的高度一定要是rem这样的适配单位，设计稿设计750px
                    this.$refs.balcony.style.transition = "";
                } else {
                    this.$refs.balcony.style.height = "";
                }
                this.scollScreen();
            });
        });
        // 页面滚动关闭下拉
        window.addEventListener("scroll", () => {
            if (this.tabHurdles.flag) {
                // 是开启状态
                this.$refs.balcony.style.height = 0;
                this.tabHurdles.flag = false;
            }
        });
        window.addEventListener("click", () => {
            // 随即又触发了关闭
            if (
                this.tabHurdles.flag &&
                window.innerWidth < this.tabHurdles.viewport // 视口宽度大于了设计宽度
            ) {
                // 是开启状态
                this.$refs.balcony.style.height = 0;
                this.tabHurdles.flag = false;
            }
        });
        window.addEventListener("load", () => {
            this.scollScreen();
        });
    },
    methods: {
        ben() {
            // 拿到一个元素的实际视口大小，乘以个数得到值，但是这样其实有很大的局限性，那就是没办法包容其他的过高元素
            this.$refs.balcony.style.transition = "all .5s";

            if (this.$refs.balcony.getBoundingClientRect().height === 0) {
                this.$refs.balcony.style.height = `${
                    this.$refs.item[0].getBoundingClientRect().height *
                    this.tiBox.length
                }px`;
                this.tabHurdles.flag = true;
            } else {
                this.$refs.balcony.style.height = 0;
                this.tabHurdles.flag = false;
            }
        },
        scollScreen() {
            // 让body有一个上padding
            document.querySelector("body").style.paddingTop =
                this.$refs.tier.getBoundingClientRect().height + "px";
        },

        knib() {
            // 小粒的点击不产生事件，除非删除事件冒泡
        },
    },
};
</script>
<style lang="less" scoped>
.layer {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    border-bottom: 1px solid #e7e7e8;
    /* 父元素需要宽度和定位 */
    width: 100%;
    z-index: 100;
}

/* 大于这个750px就应用此样式 */
@media (min-width: 750px) {
    /* 三层 */
    .balcony {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
    }

    /* 实际高度位置 */
    .boxs {
        height: 60px;
        line-height: 60px;
        display: block;
    }

    .title {
        display: none;
    }

    .button-boxs {
        display: none;
    }
}

/* 小于这个750px就应用此样式 */
@media (max-width: 750px) {
    .layer {
        background-color: rgb(255, 255, 255);
    }

    .tier {
        position: relative;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e7e7e8;
        box-sizing: border-box;
        padding: 0 15px;
    }

    /* 信息小盒子出现 */
    .title {
        height: 100px;
        line-height: 100px;
        font-size: 27px;
        display: block;
        padding: 0 10px;
        flex: 1;
    }

    .title:hover {
        background-color: #74e3af;
        cursor: pointer;
    }

    .balcony {
        position: absolute;
        top: 100px;
        left: 0px;
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 0;
        overflow: hidden;
    }

    .boxs {
        display: none;
    }

    .button-boxs {
        font-size: 27px;
        line-height: 30px;
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #e7e7e8;
        display: block;
    }

    .button-boxs:hover {
        cursor: pointer;
        background-color: #e7e7e8;
    }
}
</style>
